<template>
	<view>
		<view class="head_body">
			<dsl-navbar title="我的收益" bgTopImg="" textTitle="white" backBg="white" isBack=""></dsl-navbar>
			<view class="head_message ">
				<view class="padding-left padding-top">满50可提现，每周可提现一次</view>
				<view class="padding-left padding-top"><text class="text-xl text-bold">￥</text>
					<text class="text-sl">{{userInfo.money}}</text>
				</view>
				<view class="head_submit" @click="$tools.push('/pages/userInfo/modules/withdraw/withdraw')">
					去提现
				</view>
				<view class="message_pay">
					<view class="sanjiao">

					</view>
					<view class="align-center">
						<text>当月收益</text>
						<view class="text-bold">￥{{monthIncome || 0}}</view>
					</view>
					<view class="align-center">
						<picker mode="date" :value="startTime" start="2015-09-01" end="2090-09-01" @change="DateChange" class="margin-right-sm">
							<view class="picker align-center text-sm">
								{{startTime ||'请选择查询日期'}}
							</view>
						</picker>
					</view>
					
				</view>
			</view>
		<view class="align-center padding bg-white solid-bottom rowsb" v-for="(item,index) in payMessageList" :key="index"
		hover-class="bg-gray"
		>
			<view>{{item.remark}}</view>
			<view class="active_title">
			<text v-if="item.optType==0">+</text>
			<text v-if="item.optType==1">-</text>
			{{item.afterAmount}}</view>
		</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				pageNum: 1,
				startTime:'',//日期查询
				userInfo:uni.getStorageSync('userInfo')
			}
		},
		onReady() {},
		onLoad() {},
		onShow() {
			this.getaccountLog({
				pageNum: 1,
				pageSize: 30,
				type: 0, //类型 0-余额 1-钻石
			})
		},
		methods: {
			//选择日期
			DateChange(e){
				this.startTime = e.detail.value
				this.getaccountLog({
					pageNum: 1,
					pageSize:30,
					type:0,//类型 0-余额 1-钻石
					startTime:this.startTime,//开始时间
				})
			},
			/**
			 * getaccountLog 收益列表
			 */
			...mapActions('money', ['getaccountLog']),
			onReachBottom(e) {
				this.pageNum++
				this.getaccountLog({
					pageNum: this.pageNum,
					pageSize: 30,
					type: 0, //类型 0-余额 1-钻石
				})
			},
		},
		computed: {
			/**
			 * payMessageList 收益列表
			 * monthIncome 收益统计
			 */
			...mapState('money', ['payMessageList','monthIncome']),
		},
		components: {},
	}
</script>

<style lang="scss">
	.head_body {
		background-image: url(/static/user/modules/imgbeijing-1.png);
		background-size: 100% 100%;
		width: 750rpx;
		height: 317rpx;
	}

	//收益信息
	.head_message {
		width: 690rpx;
		height: 480rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 14px rgba(103, 103, 103, 0.5);
		border-radius: 20rpx;
		position: relative;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.head_submit {
		width: 160rpx;
		height: 60rpx;
		background: #EAA019;
		opacity: 1;
		border-radius: 30rpx 0px 0px 30rpx;
		position: absolute;
		right: 0;
		color: white;
		text-align: center;
		line-height: 60rpx;
	}

	.message_pay {
		width: 495rpx;
		height: 137rpx;
		background: #EAA019;
		box-shadow: 0px 10rpx 15rpx rgba(255, 170, 28, 0.3);
		opacity: 1;
		position: absolute;
		bottom: 50rpx;
		color: white;
		border-radius: 99rpx;
		padding-top: 30rpx;
		padding-left: 30rpx;
		margin-left: 30rpx;
	}

	.sanjiao {
		width: 0;
		height: 0;
		border-left: 20rpx solid transparent;
		border-right: 20rpx solid transparent;
		border-bottom: 40rpx solid #EAA019;
		position: absolute;
		top: -20rpx;
		margin-left: 20rpx;
	}
</style>
